import React from 'react';
import { Table, Pagination } from '@alifd/next';
import {timeFormat} from '@/utils/help';

import styles from './index.module.scss';
const TableList = (props) => {
    const { columns, dataSource, loading = false} = props;
    // 图片处理
    const getImg = (record, item) => {
      switch (item.type) {
        case 'img':
          return record[item.dataIndex] && <img src={record[item.dataIndex]} />
          break;
      case 'time':
          return <span>{timeFormat(record[item.dataIndex])}</span>
          break;
      case 'times':
          return <div className={styles.timeBox}>
            <div>{timeFormat(record[item.dataIndex])}</div>
            -
            <div>{timeFormat(record[item.dataIndex1])}</div>
          </div>
          break;
      }
      return;
    }
      // 分页监听
    const pageChange = (val: number) => {
      props.pageChange(val);
    }
    return <div>
        <Table
          dataSource={dataSource}
          loading={loading}
        >
          {columns.length && columns.map((item) => {
            return (
              <Table.Column
                width={item.width || 'auto'}
                align={item.align || 'center'}
                lock={item.lock || null}
                key={item.key}
                title={item.title}
                dataIndex={item.dataIndex}
                cell={item.type ? (value, index, record) => getImg(record, item) : item.render
                }
              />
            )
          })}
        </Table>
        {/* 分页 */}
        {
          props.total && <div className={styles.pagebox}>
                          <Pagination
                            total={props.total}
                            current={props.pageNum}
                            pageSize={props.pageSize ? props.pageSize : 20}
                            onChange={pageChange} />
                      </div>
        }
      </div>
}
export default TableList;

